<template>
  <div align="center" style="margin-top: 200px">
    <el-card style="width: 400px">
      <div slot="header" class="clearfix">
        <span style="size: 50px;color: #2b4b6b">登录</span>
      </div>
      <table>
        <tr>
          <td>用户名</td>
          <td>
            <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
          </td>
        </tr>
        <tr>
          <td>密码</td>
          <td>
            <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
            <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
          </td>
        </tr>
        <tr>
          <!-- 占两行-->
          <td colspan="2">
            <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
            <el-button style="margin-left: 100px" type="primary" @click="doLogin(user.type)">登录</el-button>
          </td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    doLogin (type) { // 一点击登录按钮，这个方法就会执行
      // alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      const _this = this
      let api = ''
      // eslint-disable-next-line eqeqeq
      api = 'http://localhost:8111/Manager_login'
      this.axios.post(api, { ..._this.user }).then(res => {
        console.log(res.data.msg)
        // eslint-disable-next-line eqeqeq
        if (res.data.msg == '登录成功') {
          // console.log(data.user.type)
          this.$message({
            message: '登录成功',
            showClose: true,
            type: 'success'
          })
          _this.$router.push('/manager')
          // eslint-disable-next-line eqeqeq
        } else if (res.data.msg == '用户不存在') {
          this.$message({
            showClose: true,
            message: '账号或密码错误',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: '账号或密码错误',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 500px;
  height: 400px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
